<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    演示??
    <button onClick="getData()">查询数据</button>
    <button onClick="createData()">新增数据</button>
    <button onClick="updateData()">更新数据</button>
    <button onClick="deleteData()">删除数据</button>
    <script>
        function handleFetch(query,variables={}){
            return fetch("/graphql",{
                method:"POST",
                headers:{
                    "Content-Type":"application/json",
                    "Accept":"application/json",
                },
                body:JSON.stringify({
                    query,
                    variables
                }) 
            }).then(res=>res.json())
        }
        function getData(){
            const query=`
                query{
                    getFilmList{
                        id,
                        name
                    }
                }
            `
            handleFetch(query).then(res=>{
                console.log(res.data)
            })
        }
        function createData(){
            const query=`
                mutation($input:FilmInput){
                    createFilm(input:$input){
                        id,
                        name
                    }
                }
            `
            handleFetch(query,{
                input:{
                    name:"7777",
                    price:700,
                    poster:"http://7777"
                }
            }).then(res=>{
                console.log(res.data)
            })
        }
        function updateData(){
            const query=`
                mutation($id:String!,$input:FilmInput){
                    updateFilm(id:$id,input:$input){
                        id,
                        name
                    }
                }
            `
            handleFetch(query,{
                id:"626b543e11ea7d445056c3ef",
                input:{
                    name:"8888",
                    price:800,
                    poster:"http://8888"
                }
            }).then(res=>{
                console.log(res.data)
            })
        }
        function deleteData(){
            const query=`
                mutation($id:String!){
                    deleteFilm(id:$id)
                }
            `
            handleFetch(query,{
                id:"626b543e11ea7d445056c3ef",
            }).then(res=>{
                console.log(res.data)
            })
        }
   </script>
</body>
</html>